<template>
  <div class="tags">
    <div class="headNav">
      <el-menu
        :default-active="onRoutes"
        class="el-menu-demo"
        mode="horizontal"
        text-color="#000"
        active-text-color="#A1322C"
        router
      >
        <template v-for="item in navData">
          <el-menu-item :route="item.url" :index="item.url" :key="item.menuId">
            <span
              v-text="$i18n.locale === 'zh' ? item.menuCname : item.menuName"
            >
            </span>
          </el-menu-item>
        </template>
        <div class="search-box" v-if="!isMobile">
          <input
            v-model="keywords"
            @keyup.enter="search"
            type="text"
            :placeholder="$t('public.search')"
            class="search"
          />
          <i class="el-icon-search search-icon" @click="search"></i>
        </div>
        <div
          class="search-btn-box"
          @click="
            dialogSearch = true;
            keywords = '';
          "
          v-else
        >
          <i class="el-icon-search search-icon"></i>
        </div>
      </el-menu>
    </div>
    <el-dialog
      :title="$t('public.search')"
      :visible.sync="dialogSearch"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-input
        v-model="keywords"
        @keyup.enter.native="search"
        show-word-limit
        type="text"
        :placeholder="$t('public.search')"
        class="search"
      />
      <div slot="footer" class="dialog-footer">
        <el-button class="clearBtn" @click.native="dialogSearch = false">{{
          $t("public.cancel")
        }}</el-button>
        <el-button type="primary" @click="search">{{
          $t("public.search")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      keywords: "" || this.$route.params.keywords, //搜索关键词
      // navData: this.$store.state.navData,
      dialogSearch: false, //移动端搜索弹框
    };
  },
  computed: {
    ...mapGetters(["navData", "isMobile"]),
    onRoutes() {
      return this.$route.matched[1].path;
      // return this.$route.path;
      // return this.$route.path.split("/").reverse()[0];
      // return this.$route.path.replace("/", "");
    },
  },
  created() {},
  mounted() {},
  methods: {
    search() {
      console.log("this.onRoutes", this.onRoutes);
      let toName = this.onRoutes.split("/")[1];
      console.log("this.onRoutes-", toName);
      if (this.$route.params.keywords != this.keywords && this.keywords) {
        if (this.isMobile) {
          this.dialogSearch = false;
        }
        this.$router.push({
          name:
            toName == "classical"
              ? "classicalSearchSummary"
              : toName == "national"
              ? "nationalSearchSummary"
              : toName == "jazz"
              ? "jazzSearchSummary"
              : "",
          params: { keywords: this.keywords },
        });
      }
    },
  },
};
</script>
<style scoped lang="scss">
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.tags {
  .headNav {
    margin-bottom: 20px;
    .el-menu-demo {
      // font-weight: bold;
      position: relative;
      .el-menu-item {
        font-size: 16px;
      }
      .search-box {
        width: 230px;
        height: 40px;
        position: absolute;
        right: 0;
        bottom: 5px;
        z-index: 10;
        padding-left: 16px;
        padding-right: 40px;
        border-radius: 2px;
        background: #f8f8f8;
        input {
          width: 100%;
          height: 100%;
          line-height: 40px;
          border: none;
          background: #f8f8f8;
          outline: none;
          font-size: 18px;
          &:focus {
            border: none;
          }
        }
        .search-icon {
          position: absolute;
          right: 16px;
          bottom: 10px;
          font-size: 20px;
          cursor: pointer;
        }
      }
      .search-btn-box {
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
      }
    }
  }
}
</style>
